<template>
    <div>
        <div class="tool-box">
            <BreadcrumbA></BreadcrumbA>
        </div>
        <!-- <dwmanager ref='dwmanager' @onReshdws="GetZbByIdFunc"></dwmanager> -->
        <div class="head-box" style="height: 100px;">
            <!-- <ul class="navbar-right">
                <li class="button" title="管理支部" @click="mangerment"><a href="javascript:;" class="speech-button">
                    <i class="el-icon-setting"></i></a></li>
            </ul> -->
            <div class="comwid clearfix">
                <div class="head-logo lf">
                    <img src="../images/bg.jpg" style="width: 100%;">
                </div>
            </div>
        </div>
        <el-row style="margin-top: 20px;">
            <div class="mytitle">{{dwValue.name}}</div>
        </el-row>
        <div id="chart-container">
            <div class="orgchart">
                <table>
                    <tbody>
                        <tr>
                            <td :colspan="colspan">
                                <div class="portfolio-item ">
                                    <div class="single-portfolio">
                                        <div class="div_tou">
                                            <div style="margin-right: 30px;height:150px; float:left;cursor: pointer;" @click="switchTodangwei">
                                                <img class="img1" :src="$store.state.images.danghui">
                                            </div>
                                            <div style="height:150px; float:right">
                                                <p class="span_Introduction" slot="content">
                                                    <span id="content" style="display: block;text-indent: 2em; text-align: left; font-size: 15px; font-weight: bold;">
                                                        欢迎您来到{{dwValue.name}}，{{dwValue.alias}}成立于{{dwValue.createtime}}年，
                                                        共有{{dwValue.dzbcount}}个党支部，
                                                        截止目前共有{{dwValue.allpersons}}人，
                                                        其中党员{{dwValue.alldypersons}}人
                                                        (在职党员{{dwValue.dyzzperson}}人，
                                                        离退休党员{{dwValue.dytxperson}}人，
                                                        男党员{{dwValue.dymanperson}}人，
                                                        女党员{{dwValue.dywomanperson}}人)，
                                                        非正式党员{{dwValue.allfdypersons}}人
                                                        (预备党员{{dwValue.fdyyb}}人，
                                                        入党积极份子{{dwValue.fdyjj}}人，
                                                        重点培养对象{{dwValue.fdyzzdx}}人)。
                                                        <i @click="playmusic" class="ivu-icon ivu-icon-ios-megaphone" style="font-size: 19px;cursor: pointer;display: unset;"></i>
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="lines">
                            <td :colspan="colspan"><div class="down"></div></td>
                        </tr>
                        <tr class="lines">
                            <td class="right">&nbsp;</td>
                            <td :class="child2.class" v-for="(child2, index2)  in childsClass" :key='index2'>&nbsp;</td>
                            <td class="left ">&nbsp;</td>
                        </tr>
                        <tr class="nodes">
                            <td colspan="2" v-for="(child, index)  in childs" :key='index'>
                                <table style="margin-left:10px">
                                    <tbody>
                                        <tr>
                                            <td colspan="4">
                                                <div class="portfolio-item ">
                                                    <div class="single-portfolio">
                                                        <figure class="css-hover-effect">
                                                            <figcaption class="figure-caption">
                                                                <div class="figure-dg">
                                                                    <a data-toggle="modal" data-target="#portfolioModal1" href="#">
                                                                        <img :src="$store.state.images.danghui">
                                                                    </a>
                                                                </div>
                                                                <div class="figure-info">
                                                                    <h2 @click="switchTo(child.dzbid)">
                                                                        <a href="#">中共内蒙古自治区</a>
                                                                        <br>
                                                                        <a href="#">{{child.alias}}</a>
                                                                    </h2>
                                                                </div>
                                                            </figcaption>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
    import Common from "../js/Common.js";
    // import dwmanager from './manager/dwmanager.vue';
    import {mapActions} from 'vuex';
    export default {
        data() {
            return {
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                parent: {}, //当前党委
                childs: [], //当前党委下面的全部支部
                dwValue: {}, //一个支部基本描述信息


                childsClass: [],
                colspan: 0,
            };
        },
        components: {
            // dwmanager,
        },
        mounted() {
            Common.Config.this=this;
            if(this.GetUser()==false){
                this.$router.push("/");
            }
            this.GetZbByIdFunc();
        },
        watch: {
            "childs": {
                handler() {
                    if (this.childs.length > 0) {
                        this.childsClass = [];
                        for (let index = 0; index < this.childs.length - 1; index++) {
                            this.childsClass.push({
                                class: 'left top'
                            });
                            this.childsClass.push({
                                class: 'right top'
                            });
                        }
                        this.colspan = 2 * this.childs.length;
                    }
                },
                deep: true
            }
        },
        methods: {
            ...mapActions(['GetZbById','Getzbdetails','GetUser','WriteActiveDwId_DzbId','WriteActivebreadcrumb']),
            playmusic(src) {
                var content = document.getElementById("content").innerText;
                var url = "http://tts.baidu.com/text2audio?lan=zh&per=3&ie=UTF-8&text=" + encodeURI(content);
                var audio = new Audio(url);
                audio.src = url;
                Common.musicObject.playmusic(url);
            },
            GetZbByIdFunc(){
                let _this=this;
                this.GetZbById()
                .then(function (e) {
                    if (typeof e === "object") {
                        _this.parent = e.PostThis;
                        _this.childs = e.childs;
                        // _this.$refs.dwmanager.$data.alldws = _this.childs;
                        _this.GetzbdetailsFunc();
                        _this.addbreadcrumb();
                    }
                });
            },
            GetzbdetailsFunc(){
                let _this=this;
                this.Getzbdetails()
                .then(function (e) {
                    if (typeof e === "object") {
                        _this.dwValue=e;
                    }
                })
            },
            switchTo(dzbid) {
                this.WriteActiveDwId_DzbId({dwid:this.$store.state.Dw_DzbID.dwid,dzbid:dzbid});
                this.$router.push({
                    // name: "zhibuclassify",
                    name: "classify",
                })
            },
            switchTodangwei(dzbid) {
                this.WriteActiveDwId_DzbId({dwid:this.parent.dwid,dzbid:-1});
                this.$router.push({
                    name: "classify",
                })
            },
            mangerment() { //管理支部
                // this.$refs.dwmanager.$data.dialogVisible = true;
                // this.$refs.dwmanager.$data.title = '党支部编辑';
            },
            addbreadcrumb()
            {
                this.WriteActivebreadcrumb({
                    name:'dw',
                    value:this.parent.alias,
                    params:{
                        dwid:this.parent.dwid,
                        dzbid:-1
                    }
                })

            },

            dasdasd()
            {
                console.log('dasdasd');
            },
        },
    }
</script>
<style scoped>
 .img1{

       margin-top: 20px;
       width: 100px;
      margin-left: 10%;
   }
</style>